<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="add">新增</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col>
        <el-table v-loading="loading" :data="tableData" ref="tableRef" border style="width: 90%" class="mb20">
          <el-table-column prop="bannerName" label="图片名" align="center">
          </el-table-column>
          <el-table-column prop="bannerUrl" label="图片展示" align="center">
            <template slot-scope="scope">
              <div class="imgs">
                <el-image class="event_img"  v-for="(item ,index) in scope.row.bannerUrl" :key="index" :src="item.url"
                  :preview-src-list="imgList_" @click="choseEventImg(item.url)">
                </el-image>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="id" label="ID" align="center">
          </el-table-column>
          <el-table-column prop="sort" label="排序" align="center">
          </el-table-column>
          <el-table-column prop="status" label="状态" align="center">
            <template slot-scope="scope">
              <div :style="{color:scope.row.status == 0 ? '#5ac725' : '#909399'}">{{scope.row.status == 0 ? '正常' : '停用'}}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center">
          </el-table-column>
          <el-table-column label="操作" width="210" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-document"
                @click.stop="bannerDetail(scope.row.id ,types = 'detail')">详情</el-button>
              <el-button size="mini" type="text" icon="el-icon-edit"
                @click.stop="bannerDetail(scope.row.id , types = 'edit')">编辑</el-button>
              <el-button size="mini" type="text" icon="el-icon-delete"
                @click="handleDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination background align='right' @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page="queryParams.pageNum" :page-size="queryParams.pageSize"
          layout="prev, pager, next" :total="total">
        </el-pagination>
      </el-col>
    </el-row>
    <el-dialog :title="types == 'add'?'新增':(types == 'edit'?'编辑':'房间')" :visible.sync="bannerVisibles" width="44%"
      :before-close="handleClose">
      <el-form ref="bannerData" :model="bannerData" label-width="120px" :rules="rules">
        <el-form-item label="图片名称" prop="bannerName">
          <el-input v-model="bannerData.bannerName" placeholder="请输入图片名称" />
        </el-form-item>
        <el-form-item label="图片排序" prop="sort">
          <el-input v-model="bannerData.sort" type="number" placeholder="请输入排序号" />
        </el-form-item>
        <el-form-item label="状态" prop="banner_status">
          <el-switch v-model="banner_status" active-color="#13ce66" inactive-color="#d1d1d1">
          </el-switch>
        </el-form-item>
        <el-form-item label="上传图片" prop="bannerUrl" class="upLaods">
          <image-much-upload ref="fileUploadRefs" v-if="types == 'add' || types == 'edit'" :limit="1" :multiple="true"
            :disabled="!addDisabled" v-model="imgList" @handleRemove="handleRemove"
            @handleUploadSuccess="handleUploadSuccess" />
          <div v-else class="imgList">
            <img v-for="(item ,index) in imgList" :key="index" :src="item.url" alt="" />
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer" v-if="types == 'add' || types == 'edit'">
        <el-button @click="bannerVisibles = false">取 消</el-button>
        <el-button type="primary" @click="onModifyBanner('bannerData')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { js } from "js-beautify"
import {
    getBannerList,
    bannerModify,
    bannerDel,
    getDetail,
    bannerAdd
  } from "@/api/banner/banner"
  import ImageMuchUpload from "@/components/upload/upload"
  export default {
    components: {
      ImageMuchUpload
    },
    data() {
      return {
        loading: true,
        total: 0,
        tableData: [],
        queryParams: {
          pageNum: 1,
          pageSize: 10
        },
        fromData: {
          createBeginTime: "",
          createEndTime: "",
          pageNum: 1,
          pageSize: 10,
          status: 99
        },
        bannerData: {
          bannerName: '',
          bannerUrl: '',
          sort: 0,
          status: 0
        },
        types: 'add',
        bannerVisibles: false,
        imgList: [],
        imgList_:[],
        addDisabled: false,
        banner_status: true,
        rules: {
          bannerUrl: [{
            required: true,
            message: '请输入房间名称',
            trigger: 'blur'
          }]
        },
        id: ''
      }
    },
    created() {
      this.getBannerList()
    },
    methods: {
      // 上传
      handleRemove(file, index) {
        this.imgList.forEach((item, ik) => {
          if (item == file.url) {
            this.$delete(this.imgList, ik)
          }
        })
        this.imgList.splice(index, 1)
        this.bannerData.bannerUrl = JSON.stringify(this.imgList)
      },
      handleUploadSuccess(url) {
        this.imgList = this.imgList.concat(url)
        this.bannerData.bannerUrl = JSON.stringify(this.imgList)
      },
      getBannerList() {
        this.fromData.pageNum = this.queryParams.pageNum
        this.fromData.pageSize = this.queryParams.pageSize
        getBannerList(this.fromData).then(res => {
          res.data.rows.map(item => {
            this.$set(item , 'bannerUrl' , JSON.parse(item.bannerUrl))
          })
          this.tableData = res.data.rows
          console.log(this.tableData)
          this.total = res.data.total
          this.loading = false
        })
      },
      handleSizeChange(val) {
        this.queryParams.pageNum = val
        this.getBannerList()
      },
      handleCurrentChange(val) {
        this.queryParams.pageNum = val
        this.getBannerList()
      },
      add() {
        this.types = 'add'
        this.bannerVisibles = true
        this.bannerData = {
          bannerName: '',
          bannerUrl: '',
          sort: 0,
          status: 0
        }
        this.banner_status = true
        this.imgList = []
        this.$nextTick(() => {
          this.$refs.fileUploadRefs.$refs.UploadRef.clearFiles() // 清除历史上传文件
        })
      },
      bannerDetail(id) {
        getDetail(id).then(res => {
          console.log("detail", res)
          this.id = id
          this.bannerData = res.data
          let imgs = JSON.parse(res.data.bannerUrl)
          this.imgList = imgs
          if (this.bannerData.status == 0) {
            this.banner_status = true
          } else {
            this.banner_status = false
          }
          this.bannerVisibles = true
        })
      },
      handleDelete(id) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          bannerDel(id).then(res => {
            if (res.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getBannerList()
            } else {
              this.$message({
                type: 'error',
                message: '删除失败'
              })
            }
          })
        })
      },
      onModifyBanner(bannerData) {
        this.$refs[bannerData].validate((valid) => {
          if (valid) {
            if (this.banner_status) {
              this.bannerData.status = 0
            } else {
              this.bannerData.status = 1
            }
            if (this.bannerData.id) {
              bannerModify(this.bannerData).then(res => {
                this.$message({
                  type: 'success',
                  message: '提交成功!'
                })
                this.bannerVisibles = false
                this.getBannerList()
              })
            } else {
              bannerAdd(this.bannerData).then(res => {
                this.$message({
                  type: 'success',
                  message: '提交成功!'
                })
                this.bannerVisibles = false
                this.getBannerList()
              })
            }
          }
        })
      },
      handleClose() {
        this.bannerVisibles = false
      },
      choseEventImg(url){
        this.imgList_.push(url)
      }
    }
  }
</script>

<style lang="scss">
  .event_img {
    width: 90px;
    height: 50px;
    border-radius: 4px;
  }

  .imgList {
    img {
      width: 80px;
      height: 80px;
      margin-right: 4px;
      background: #f5f5f5;
      border-radius: 4px;
    }
  }
</style>
